<template>
  <a-drawer
    :modal="false"
    :append-to-body="false"
    :wrapperClosable="true"
    :destroy-on-close="true"
    style="position: absolute"
    direction="rtl"
    class="properties-panel"
    width="100%"
    :size="500"
    @closeDrawer="closeDrawer"
    :open="showDrawer"
  >
    <!-- <div v-if="panelType !== 'condition'">
      <div class="setter-title">设置名称</div>
      <name-setter v-model="name" @change="handelNameChange"> </name-setter>
    </div>
    <div v-if="panelType === 'action'">
      <div class="setter-title">设置行为</div>
      <action-setter
        v-model="actions"
        :context="context"
        :current="currentModel"
        :lf="lf"
      />
    </div>
    <div v-if="panelType === 'condition'">
      <div class="setter-title">设置条件</div>
      <condition-setter
        v-model="condition"
        :context="context"
        ref="edgeProperties"
        :lf="lf"
      />
    </div>
    <div v-if="panelType === 'event'">
      <div class="setter-title">设置事件</div>
      <event-setter
        v-model="event"
        :context="context"
        :current="currentModel"
        :lf="lf"
      />
    </div>
    <div v-if="panelType === 'ds'">
      <div class="setter-title">设置请求</div>
      <ds-setter
        v-model="ds"
        :context="context"
        :current="currentModel"
        :lf="lf"
      />
    </div>
    <div v-if="panelType === 'pageJump'">
      <div class="setter-title">设置跳转</div>
      <page-jump-setter
        v-model="pageJump"
        :lf="lf"
        :context="context"
        :current="currentModel"
      />
    </div>
    <div v-if="panelType === 'dc'">
      <div class="setter-title">数据转换</div>
      <dc-setter
        v-model="dc"
        :lf="lf"
        :context="context"
        :current="currentModel"
      />
    </div> -->
    <!-- <a-button
      type="primary"
      size="small"
      @click="handleSubmit"
      class="properties-button"
      >确认</a-button
    >
    <a-button size="small" @click="handleCancel" class="properties-button"
      >取消</a-button
    > -->
  </a-drawer>
</template>

<script lang="ts" setup>
import { onMounted, Ref, ref, unref, defineProps, watch, defineExpose, defineEmits , computed} from 'vue';
import { useMessage } from '/@/hooks/web/useMessage';
import { map, filter } from "lodash-es";
// import { validateCode } from "../../util/validate";
// import actionSetter from "./actionSetter.vue";
// import conditionSetter from "./conditionSetter.vue";
// import eventSetter from "./eventSetter.vue";
// import dsSetter from "./dsSetter.vue"; // DataSource
// import nameSetter from "./nameSetter.vue";
// import pageJumpSetter from "./pageJumpSetter.vue";
// import dcSetter from "./dcSetter.vue"; // DataConvert

const { createMessage } = useMessage();

const panelType = ref("");
const showDrawer = ref(false);
const currentModel = ref({});
const currentNode = ref({});
const currentEdge = ref({});
const actions = ref([]);
const condition = ref({});
const event = ref({});
const ds = ref({}); // DataSource
const pageJump = ref({});
const dc = ref({}); // DataConvert
const name = ref("");

// 定义组件接收的参数
const props = defineProps({
  lf: Object,
  context: Object,
});

const emits = defineEmits(['submit']);

onMounted(() => {
  props.lf.on("node:click", ({ data }) => {
    console.log("data", data);
  });
  props.lf.on("blank:click", () => {
    showDrawer.value = false;
    panelType.value = "";
    currentEdge.value = {};
  });
  // 点击边处理
  props.lf.on("edge:option-click", (model) => {
    currentEdge.value = model;
    const properties = model.getProperties();
    condition.value = properties.condition || {};
    showDrawer.value = true;
    panelType.value = "condition";
  });
  // 点击节点处理
  props.lf.on("node:select-click", (model) => {
    console.log("model ===>>>", model);
    currentNode.value = model;
    const properties = model.getProperties();
    name.value = properties.name;
    switch (model.type) {
      case "event-node":
        event.value = (properties && properties.event) || {};
        panelType.value = "event";
        if (
          model.properties &&
          model.properties.componentName !== "pageInit"
        ) {
          showDrawer.value = true;
        }
        break;
      case "reaction-node":
        actions.value = (properties && properties.reactions) || [];
        panelType.value = "action";
        showDrawer.value = true;
        break;
      case "common-node":
        if (properties && properties.componentName === "dataSource") {
          // 打开数据源设置器
          ds.value = (properties && properties.ds) || {};
          panelType.value = "ds";
          showDrawer.value = true;
        } else if (properties && properties.componentName === "pageJump") {
          // 打开页面跳转设置器
          pageJump.value = (properties && properties.pageJump) || {};
          panelType.value = "pageJump";
          showDrawer.value = true;
        } else if (properties && properties.componentName === "dataConvert") {
          // 打开数据转换设置器
          dc.value = (properties && properties.dc) || {};
          panelType.value = "dc";
          showDrawer.value = true;
        }
        break;
    }
  });
});

function handleChange(data, type) {
    //this[type] = data;
}

function handelNameChange(val) {
  name.value = val;
}

function handleSubmit() {
  const currentNode = currentNode.value;
  props.lf.setProperties(currentNode.id, {
    name: name.value,
  });
  console.log("panelType.value ...???", panelType.value);
  switch (panelType.value) {
    case "action":
      props.lf.setProperties(currentNode.id, {
        reactions: actions.value,
      });
      break;
    case "condition":
      if (currentEdge.value) {
        props.lf.setProperties(currentEdge.value.id, {
          condition: condition.value,
        });
      }
      break;
    case "event":
      props.lf.setProperties(currentNode.id, {
        event: event.value,
      });
      break;
    case "ds": // DataSource
      props.lf.setProperties(currentNode.id, {
        ds: ds.value,
      });
      break;
    case "pageJump":
      props.lf.setProperties(currentNode.id, {
        pageJump: pageJump.value,
      });
      break;
    case "dc": {
      // DataConvert
      // DONE1: 做请求数据的必填校验（?），是否需要
      const { convertList = [], convertCode } = dc.value;
      // DONE2: 做输入代码段校验，并提示
      // 1. 校验js语法是否正确
      // 2. 检测代码中是否有动态插入的 script 标签
      // 3. 是否需要关注 SQL 注入的危险
      // 4. HTTP 请求是否应该屏蔽

      if (!convertCode) {
        createMessage.error("数据转换函数不能为空");
        return false;
      }

      // 生成预期的函数体，用如下方法包裹用户输入的函数体。
      // function main(arg1, arg2, ...) {}
      try {
        const keyList = filter(
          map(convertList, (item) => item.key),
          (key) => key
        );
        const funcParams = keyList.join(", ");
        const fullFunc = `function main(${funcParams}) {
          ${convertCode}
        }`;

        const valid = validateCode(fullFunc);
        if (!valid) {
          throw new Error("代码校验未通过，请确认代码是否合规");
        }
      } catch (error) {
        console.error("ops, something error --->>>", error);
        createMessage.error(error?.message);
        return;
      }

      props.lf.setProperties(currentNode.id, {
        dc: dc.value,
      });
      break;
    }
  }
  showDrawer.value = false;
  emits("submit", panelType.value);
}

function handleCancel() {
  showDrawer.value = false;
}

function closeDrawer() {
  currentEdge.value = null;
}
</script>

<style scoped lang="less">
:deep(.a-drawer) {
  padding: 12px 12px;
  box-sizing: border-box;
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    /*滚动条整体样式*/
    background: transparent;
    border-radius: 5px;
    width: 4px;
    z-index: -1;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 4px;
    background: #dcdfe6;
    z-index: -1;
  }

  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 4px;
    background: transparent;
  }

  &::-webkit-scrollbar-corner {
    /*滚动条交汇处*/
    border-radius: 4px;
    background: transparent;
  }
}
:deep(.a-drawer__header) {
  margin: 0;
  height: 0;
}

.setter-title {
  font-size: 16px;
  font-weight: bold;
  font-size: 16px;
  color: #303133;
  // background: #f2f3f7;
  height: 50px;
  line-height: 50px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.properties-button {
  float: right;
  margin-top: 20px;
  margin-left: 10px;
}
</style>
